<template>
  <div>
    <v-pageTitle vtitle="科室医生管理"></v-pageTitle>
    <div class="clear"></div>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card class="box-card">
              <el-row>
                <el-col :span='18'>
                  科室管理
                </el-col>
                <el-col :span='4'>
                    <el-button size="small" class="oneone" @click="dialogFormVisible = true">+添加</el-button>
                </el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col class="order">
                  <div class="order-index">
                    A
                  </div>
                  <div class="oreder-list">
                    <ul>
                      <li>AXX专科</li>
                      <li>AXX专科</li>
                      <li>AXX专科</li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col class="order">
                  <div class="order-index">
                    B
                  </div>
                  <div class="oreder-list">
                    <ul>
                      <li>BXX专科</li>
                      <li>BXX专科</li>
                      <li>BXX专科</li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col class="order">
                  <div class="order-index">
                    C
                  </div>
                  <div class="oreder-list">
                    <ul>
                      <li>CXX专科</li>
                      <li>CXX专科</li>
                      <li>CXX专科</li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card class="box-card">
              <el-row>
                <el-col :span='20'>
                  医生管理（7）
                </el-col>
                <el-col :span='4'>
                    <el-button size="small" class="oneone" @click="dialogFormDoctor = true">+添加</el-button>
                </el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col>
                  <ul>
                    <li class="doctor-list" v-for='item in doctorList'>
                      <div>
                          <i class="icon iconfont icon-jiatingyisheng-"></i>
                      </div>
                      <div>
                        {{item.name}}
                      </div>
                      <div>
                        {{item.zhicheng}}
                      </div>
                      <div>
                        {{item.good}}
                      </div>
                      <div>
                        <el-button size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                      </div>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!-- 弹出的添加科室的form -->
    <el-dialog title="添加科室" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="科室名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="社区卫生中心" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="南环街道" value="shanghai"></el-option>
            <el-option label="城站路360号" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出的添加医生管理的form -->
    <el-dialog title="添加医生" :visible.sync="dialogFormDoctor">
      <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="姓名">
    <el-input v-model="form.name" ></el-input>
  </el-form-item>
  <el-form-item label="所属科室">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
  </el-form-item>

  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="个人简介">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="dialogFormDoctor = false">立即创建</el-button>
    <el-button @click="dialogFormDoctor = false">取消</el-button>
  </el-form-item>
</el-form>
    </el-dialog>
  </div>
</template>

<script>
import vPageTitle from '../common/pageTitle.vue';

export default {
  components:{
    vPageTitle
  },
  methods: {
     deleteRow(index, rows) {
       rows.splice(index, 1);
     },
     handleAvatarSuccess(res, file) {
       this.imageUrl = URL.createObjectURL(file.raw);
     },
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg';
       const isLt2M = file.size / 1024 / 1024 < 2;

       if (!isJPG) {
         this.$message.error('上传头像图片只能是 JPG 格式!');
       }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!');
       }
       return isJPG && isLt2M;
     }
   },
  data(){
    return{
      dialogFormVisible: false,
      dialogFormDoctor:false,
      imageUrl: '',
      form: {
         name: '',
         region: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: ''
       },
      doctorList:[
        {
          name:'章三',
          zhicheng:'主任',
          good:'擅长肩关节炎、骨质增生疾病治疗。'
        },
        {
          name:'里斯',
          zhicheng:'医生',
          good:'擅长肩关节炎、骨质增生疾病治疗。'
        },
        {
          name:'赵倩',
          zhicheng:'科长',
          good:'擅长肩关节炎、骨质增生疾病治疗。'
        },
        {
          name:'孙武',
          zhicheng:'医师',
          good:'擅长肩关节炎、骨质增生疾病治疗。'
        },
        {
          name:'章三',
          zhicheng:'专家',
          good:'擅长肩关节炎、骨质增生疾病治疗。'
        },
      ],
     form: {
       name: '',
       region: '',
       date1: '',
       date2: '',
       delivery: false,
       type: [],
       resource: '',
       desc: ''
     },
     formLabelWidth: '120px',
    }
  }
}
</script>

<style lang="less" scoped>
@fontColor:#fff9dd;
@backColor:#009983;
@primaryColor:#a8d182;
.oneone{
  width: 80px;
}
li{
  list-style: none;
  padding:0;
  margin:0;
}
hr{
  height:1px;
  border:none;
  border-top:1px  solid #ccc;
  margin-bottom:5px;
  margin-top:6px;
}
.order{

  display: flex;
  .order-index{
    height: 45px;
    line-height: 45px;
    margin-right: 50px;
    margin-left: 10px;
  }
  li{
    list-style: none;
    cursor: pointer;
    width: 15vw;
    height: 45px;
    line-height: 45px;
    padding-left: 30px;
  }
  li:hover{
    background-color: @primaryColor;
    color: @fontColor;
  }
}
.doctor-list{
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid  #ccc;
  .iconfont{
    font-size: 80px;
    color: @primaryColor;
  }
}
.doctor-list:hover{
  background: @fontColor;
  cursor: pointer;
}
// 上传图片
.avatar-uploader .el-upload {
  border: 1px dashed red;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
